<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- <title></title> -->
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<script src="/screen/js/jquery-3.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入 Element Plus 样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
		<link rel="stylesheet" href="/screen/css/colorfulModel.css">
		<!-- 引入 Vue 3 -->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<!-- 引入 Element Plus -->
		<script src="https://unpkg.com/element-plus"></script>
		<script src="/screen/js/echarts.min.js"></script>
		<script src="/screen/js/echarts-gl.min.js"></script>

	</head>

	<body>
		<div class="main" id="colorfulModel">
			<div class="colorfulModelContainer" v-cloak>
				<!-- 头部 -->
				<div class="header">
					<div class="leftH">
						<div class="goback" @click="goback"><span>返回</span></div>
						<img src="/screen/assets/images/colorful/tai.png" alt="" class="imgL" />
						{{dapenginfo.product_name}}温室℃-10E
					</div>
					<span class="text">{{dapenginfo.product_name}}生长模型数据中心</span>
					<div class="rightH">{{yearMonth}} 星期{{week}} {{hoursMin}}</div>
				</div>
				<!-- 内容开始 -->
				<div class="colorfulContent">
					<!-- 左边的 -->
					<div class="lectContent">
						<div class="leftItem leftItem2">
							<div class="titleComm"><span>气象信息</span></div>
							<div class="alert">
								<div class="alertlist">
									<div class="alertItem" v-if="alertData.length && alertData[0]">
										<img src="/screen/assets/images/colorful/alert.png" alt="" class="alertimg" />
										{{alertData[0].type}}：{{alertData[0].title}}
									</div>
								</div>
							</div>
							<div class="leftTop" style="height: 37%;">
								<div class="leftTopItem" v-for="(item,index) in moreData" :key="index">
									<div class="ltitile">{{item.predictDate}}</div>
									<img src="/screen/assets/images/colorful/yun.png" alt="" class="yun" />
									<div class="subtitle">{{item.conditionDay}} {{item.tempNight}}-{{item.tempDay}}℃</div>
								</div>
							</div>
							<div class="leftTop" style="height: 23%;">
								<div class="leftcenter">
									<div class="lcTile">温度(Temp)</div>
									<div class="lcCon">
										{{nowData.temp}}<span class="unit">℃</span>
									</div>
								</div>
								<div class="leftcenter">
									<div class="lcTile">湿度(DEWP)</div>
									<div class="lcCon">
										{{nowData.humidity}}<span class="unit">%</span>
									</div>
								</div>
								<div class="leftcenter">
									<div class="lcTile">降水量(PRCP​)</div>
									<div class="lcCon">
										{{nowData.rainfall}}<span class="unit">mm</span>
									</div>
								</div>
							</div>
							<div class="leftTop" style="height: 23%;">
								<div class="leftcenter">
									<div class="lcTile">风速(Wdsp)</div>
									<div class="lcCon">
										{{nowData.windDegrees}}<span class="unit">m/s</span>
									</div>
								</div>
								<div class="leftcenter">
									<div class="lcTile">风向(N)</div>
									<div class="lcCon">
										{{nowData.windDir}}<span class="unit">方向</span>
									</div>
								</div>
								<div class="leftcenter">
									<div class="lcTile">光照(‌Lux‌)</div>
									<div class="lcCon">
										{{nowData.uvi}}<span class="unit">Lux</span>
									</div>
								</div>
							</div>
						</div>
						<div class="leftItem">
							<div class="titleComm"><span>基础数据</span></div>
							<div id="basicData2" style="height: 17vh;"></div>
							<div id="basicData" style="height: 17vh;"></div>
						</div>
					</div>
					<!-- 中间的内容 -->
					<div class="centerContent">
						<div class="titleComm"><span>生长模型</span></div>
						<div class="centerWrapper">
							<div @click="changeindex(1)" :class="[tabIndex == 1 ? 'active' : '', 'centerTopItem']"><span class="text">当前现状</span></div>
							<div @click="changeindex(2)"  :class="[tabIndex == 2 ? 'active' : '', 'centerTopItem']"><span class="text">生长模型</span></div>
						</div>
						<template v-if="tabIndex == 1">
							<div class="centerWrapper2">
								<div 
								  v-for="(item,index) in recordData" :key="index"
								  :class="[templateIndex == index ? 'active' : '', 'centerTopItem2']"
								  @click="handchange(index)"
								>
								  <span class="text">{{item.period_name}}</span>
								</div>
							</div>
							<!-- 当前的生长期 -->
							<div class="nowZk" v-if="recordData[templateIndex]">
								<div class="nowheader">
									<img src="/screen/assets/images/colorful/yuan.png" alt="" class="yuan" />
									<span>{{recordData[templateIndex].period_time}}</span>
								</div>
								<div class="nowtitle" v-if="templateData[templateIndex]">当前期特征</div>
								<div class="nowCon" v-if="templateData[templateIndex]">
									{{templateData[templateIndex].feature}}
								</div>
							</div>
							<!-- 右侧的栽培措施 -->
							<div class="rightcs" v-if="templateData[templateIndex]">
								<div class="nowtitle">栽培措施</div>
								<div class="nowCon">
									{{templateData[templateIndex].measure}}
								</div>
							</div>
							<!-- 右侧提示信息 -->
							<div class="rightTip">
								当前地块占地店积{{dapenginfo.area}}亩<br/>
								所种品种为：{{dapenginfo.product_name}}<br/>
								地块所有人：{{dapenginfo.manager_name}}<br/>
							</div>
							<img v-if="recordData[templateIndex]" :src="recordData[templateIndex].img" alt="" class="caoimg" />
						</template>
						<template v-if="tabIndex == 2">
							<!-- 当前的生长期 -->
							<div class="nowZk">
								<div class="nowheader caoimgwrapper">
									<div v-for="(item,index) in templateData"  class="caoimg2">
										<img :src="item.img" alt="" style="width: 100%;"/>
										<div class="caotishi">
											{{item.name}}<br/>
											{{item.period}}
										</div>
									</div>
								</div>
							</div>
						</template>	
					</div>
					<!-- 右侧的内容 -->
					<div class="rightContent">
						<div class="leftItem">
							<div class="titleComm"><span>温室微气候</span></div>
							<div class="alert">
								<div class="alertlist">
									<div class="alertItem" v-if="alertData.length && alertData[0]">
										<img src="/screen/assets/images/colorful/alert.png" alt="" class="alertimg" />
										{{alertData[0].type}}：{{alertData[0].title}}
									</div>
								</div>
							</div>
							<div class="rightTop">
								<div class="rightTopLeft">温室气象</div>
								<div style="flex: auto;">
									<div class="leftTop">
										<div class="leftcenter">
											<div class="lcTile">光照(‌Lux‌)</div>
											<div class="lcCon">
												{{dapenginfoRight.LUX}}<span class="unit">Lux</span>
											</div>
										</div>
										<div class="leftcenter">
											<div class="lcTile">温度(Temp)</div>
											<div class="lcCon">
												{{dapenginfoRight.Temp}}<span class="unit">℃</span>
											</div>
										</div>
										<div class="leftcenter">
											<div class="lcTile">湿度(DEWP)</div>
											<div class="lcCon">
												{{dapenginfoRight.Humi}}<span class="unit">%</span>
											</div>
										</div>
									</div>
									<div class="leftTop">
										<div class="leftcenter">
											<div class="lcTile">风速(m/s)</div>
											<div class="lcCon">
												{{dapenginfoRight.windSpeed}}
											</div>
										</div>
										<div class="leftcenter">
											<div class="lcTile">风向</div>
											<div class="lcCon">
												{{dapenginfoRight.windDir}}
											</div>
										</div>
										<div class="leftcenter">
											<div class="lcTile">降水量(mm)</div>
											<div class="lcCon">
												{{dapenginfoRight.rainfall}}
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="rightTop">
								<div class="rightTopLeft2">温室土壤<br>疫情信息</div>
								<div style="flex: auto;">
									<div class="leftTop">
										<div class="leftTopItem" style="padding:0;">
											<img src="/screen/assets/images/colorful/wd.png" alt="" class="ph"/>
											<div class="rigtSub">土壤温度</div>
											<div class="lcCon lcCon2">
												{{dapenginfoRight.soil_temp}}<span class="unit">%</span>
											</div>
										</div>
										<div class="leftTopItem" style="padding:0;">
											<img src="/screen/assets/images/colorful/sd.png" alt="" class="ph"/>
											<div class="rigtSub">土壤湿度</div>
											<div class="lcCon lcCon2">
												{{dapenginfoRight.soil_humi}}<span class="unit">%</span>
											</div>
										</div>
										<div class="leftTopItem" style="padding:0;">
											<img src="/screen/assets/images/colorful/ph.png" alt="" class="ph"/>
											<div class="rigtSub">土壤ph</div>
											<div class="lcCon lcCon2">
												{{dapenginfoRight.soil_ph}}<span class="unit">%</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="leftItem leftItem2">
							<div class="titleComm"><span>病虫害监测</span></div>
							<div class="monitoring" style="margin: 1% 0;">
								<div class="monitTitle">病害监测</div>
								<div class="monitimgwrapper">
									<img src="/screen/assets/images/colorful/chong.png" alt="" class="monitimg"/>
									<img src="/screen/assets/images/colorful/chong.png" alt="" class="monitimg"/>
								</div>
							</div>
							<div class="monitoring">
								<div class="monitTitle">虫害孢子监测</div>
								<div class="monitimgwrapper">
									<img src="/screen/assets/images/colorful/chong.png" alt="" class="monitimg"/>
									<img src="/screen/assets/images/colorful/chong.png" alt="" class="monitimg"/>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 尾部的 -->
				<div class="footer">
					<img src="/screen/assets/images/colorful/footer.png" alt="" class="footer" />
				</div>
			</div>
		</div>

		<script type="module">
			const {createApp, ref, onMounted, nextTick, onBeforeUnmount } = Vue;
			import { lineAreaChartFun } from "/screen/echarts/lineAreaChart.js"; //折线图区域
			import { lineBar2ChartFun } from "/screen/echarts/lineBarChart2.js"; //柱状和折线图 虚线
			let baseUrl = 'https://sxadmin.sxgkx.cn/STleXfFAvV.php/screen/'
			let gid = null //大棚id
			let currentUrl = window.location.href; 
			let queryString = currentUrl.split('?')[1]; 
			if (queryString) {
				let params = new URLSearchParams(queryString); 
				gid = params.get('gid');
			}
			createApp({
				setup() {
					const moreData = ref([])
					const nowData = ref({})
					const dapenginfo = ref({})
					const dapenginfoRight = ref({})
					const alertData = ref([])
					const recordInfo = ref({})
					const recordData = ref([])
					const templateData = ref([])
					const templateIndex = ref(0)
					const tabIndex = ref(1)
					
					const hoursMin = ref('00:00');
					const yearMonth = ref('');
					const week = ref('');
					let timer = null;
					onMounted(() => {
						const nowTod = new Date();
						const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
						yearMonth.value = nowTod.getFullYear() + '年' + (nowTod.getMonth() + 1) + '月' +nowTod.getDate() +'日'
						week.value = weekdays[nowTod.getDay()]
						updateTime();
						timer = setInterval(updateTime, 1000);
						// 天气预警
						$.ajax({
							url: baseUrl + 'weather/alertInfo',
							type: 'GET',
							timeout: 15000,
							success: function(data) {
								// console.log(data)
								alertData.value = data.data
							}
						})
						// 大棚传感器信息
						$.ajax({
							url: baseUrl + 'base/greenhouseSensorInfo',
							type: 'GET',
							data:{gid:gid},
							timeout: 15000,
							success: function(data) {
								// console.log(data)
								dapenginfoRight.value = data.data
							}
						})
						// 今日天气
						$.ajax({
							url: baseUrl + 'weather/now',
							type: 'GET',
							timeout: 15000,
							success: function(data) {
								// console.log(data)
								nowData.value = data.data
							}
						})
						// 多天天气
						$.ajax({
							url: baseUrl + 'weather/forecastMoreDays',
							type: 'GET',
							timeout: 15000,
							success: function(data) {
								// console.log(data)
								moreData.value = data.data
							}
						})
						// 大棚详情
						$.ajax({
							url: baseUrl + 'base/greenhouseDetail',
							type: 'GET',
							data:{gid:gid},
							timeout: 15000,
							success: function(data) {
								// console.log(data)
								dapenginfo.value = data.data
								// 生长模型
								$.ajax({
									url: baseUrl + 'base/growthTemplateInfo',
									type: 'GET',
									data:{pid:data.data.product_id,},
									timeout: 15000,
									success: function(dataTem) {
										// console.log(dataTem)
										templateData.value = dataTem.data
									}
								})
							}
						})
						// 生长周期
						$.ajax({
							url: baseUrl + 'base/growthRecord',
							type: 'GET',
							data:{gid:gid},
							timeout: 15000,
							success: function(data) {
								console.log(data)
								recordInfo.value = {
									growthWeeks: data.data.growthWeeks,
									currentWeek: data.data.currentWeek,
									growthDays: data.data.growthDays,
									currentDay: data.data.currentDay,
									startDate: data.data.startDate,
								}
								let item = data.data.records.findIndex(item=>item.is_current == 1)
								templateIndex.value = item
								recordData.value = data.data.records
							}
						})
						
						nextTick(() => {
							initbasicData() //基础数据
						})
					});
					// onBeforeUnmount(() => {
					//   clearInterval(timer);
					// });
					// 基础数据
					const initbasicData = (datvalue, datares) => {
						let lineBar2Charts = echarts.init(document.getElementById('basicData2'));
						let lineAreaCharts = echarts.init(document.getElementById('basicData'));
						
						$.ajax({
							url: baseUrl + 'weather/greenhouseLineStats',
							type: 'GET',
							timeout: 15000,
							success: function(data) {
								// console.log(data)// humiBar 湿度
								data.data.humiBar.yData[0].color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#FFC400FF'
									},
									{
										offset: 1,
										color: '#251202FF'
									}
								])
								lineBar2Charts.setOption(JSON.parse(JSON.stringify(lineBar2ChartFun({
									...data.data.humiBar,
									legendShow: false,
								}))));
							
								let datacC = {
									xData: data.data.tempLine.xData,
									legendShow: false,
									unit: '单位：',
									color: [
										['rgba(255, 160, 108, 0.2)', 'rgba(255, 160, 108, 0.6)',
											'rgba(255, 160, 108, 1)'
										],
										['rgba(139, 209, 182, 0.2)', 'rgba(139, 209, 182, 0.6)',
											'rgba(139, 209, 182, 1)'
										],
									],
									yData: data.data.tempLine.yData
								}
								lineAreaCharts.setOption(JSON.parse(JSON.stringify(lineAreaChartFun(datacC))));
							}
						})
						
					}
					
					const goback = () =>{
						window.location.href='./industryResources.html?gid='+gid
					}
					const changeindex = (index) =>{
						tabIndex.value = index
					}
					const handchange = (index) =>{
						templateIndex.value = index
					}
					
					const updateTime = () => {
					  const now = new Date();
					  hoursMin.value = formatTimeUnit(now.getHours()) + ':' + formatTimeUnit(now.getMinutes())
					};
					
					const formatTimeUnit = (unit) => {
					  return unit < 10 ? '0' + unit : unit.toString();
					};
					
					return {
						nowData,
						dapenginfo,
						dapenginfoRight,
						moreData,
						alertData,
						templateData,
						templateIndex,
						tabIndex,
						handchange,
						changeindex,
						recordData,
						recordInfo,
						hoursMin,
						yearMonth,
						goback,
						week
					};
				}
			}).use(ElementPlus).mount('#colorfulModel');
		</script>
	</body>

</html>